<template>
  <view class="index-container">
    <!-- 搜索组件 S-->
    <mySearch v-if="searchShow"></mySearch>
    <!-- 搜索组件 E-->
    <!-- 轮播图 S -->
    <swiper class="banner">
      <swiper-item v-for="item in banner" :key="item.id">
        <navigator :url="'/pkgGood/detail/detail?id='+ item.goods_id">
          <image class="img" mode="widthFix" :src="item.image_url"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 轮播图 E -->
    <!-- 通知组件 S -->
    <u-notice-bar :text="notice"></u-notice-bar>
    <!-- 通知组件 E-->
    <!-- 菜单区域 S -->
    <u-grid :border="false" col="5">
      <u-grid-item @click="goCate(item.id)" v-for="item in channel" :key="item.id">
        <image class="menuImg" mode="widthFix" :src="item.icon_url"></image>
        <text class="menuText">{{item.name}}</text>
      </u-grid-item>
    </u-grid>
    <!-- 菜单区域 E -->
    <!-- 商品分类 S -->
    <view class="goodContainer" v-for="item in categoryList" :key="item.id">
      <view class="titleBox">
        <text @click="goCate(item.id)">{{item.name}}</text>
      </view>
      <!-- 商品列表 S-->
      <goodList :list="item.goodsList"></goodList>
      <!-- 商品列表 E-->
    </view>
    <!-- 商品分类 E -->
  </view>
</template>
<script>
  export default {
    name: 'Index',
    data() {
      return {
        // 1. 定义相关数据变量
        banner: [],
        categoryList: [],
        channel: [],
        notice: '',
        searchShow: false
      }
    },
    onShow() {
      // 每次打开的时候都能更新数据
      this.getIndexData()
      this.searchShow = true
    },
    onHide() {
      this.searchShow = false
    },
    methods: {
      // 2. 获取首页数据
      async getIndexData() {
        // 2.1 请求数据
        const res = await uni.$http.get('/index/appInfo')
        console.log(res)
        this.banner = res.banner
        this.categoryList = res.categoryList
        this.channel = res.channel
        this.notice = res.notice.map((item, index) => {
          return (index + 1) + '.' + item.content + ' '
        }).join('')
      },
      // 跳转分类界面
      goCate(id) {
        // 存储在本地
        uni.setStorageSync('cateId', id)
        uni.switchTab({
          url: '/pages/cate/cate'
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .titleBox {
    margin: 10rpx 0;
    background-color: #fafafa;
    padding: 20rpx 0;
    box-sizing: border-box;
    text-align: center;

    text {
      display: inline-block;
      border-bottom: 4rpx solid #409eff;
      color: #333;
      font-size: 28rpx;
    }
  }

  .goodContainer {
    padding: 0 20rpx;
  }

  .banner {
    .img {
      width: 100%;
    }
  }

  .menuImg {
    width: 80rpx;
  }

  .menuText {
    color: #888;
  }
</style>
